<template>
  <div class="baseView">
    <h1>系统主页</h1>
    <a-input-search
      v-model:value="value"
      placeholder="请输入搜索工具"
      enter-button
      :loading="loading"
      @search="onSearch"
      @blur.prevent
      style="width: 350px"
    />
    <div class="outBox">
      <div
        class="groupBox"
        v-for="(item, index) in listData"
        :key="index"
        @click="groupBoxOnclick(item)"
      >
        <div class="groupToolImg">
          <SvgIcon :iconName="item.icon" size="40px"></SvgIcon>
        </div>
        <div class="groupToolLabels">
          <div class="box-1">
            <p class="groupToolDescribeTitle">{{ item.name }}</p>
            <p class="groupToolDescribeContent">{{ item.tips }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//路由相关的静态
import RouterConstant from '../../components/constant/routerConstant'
import router from '../../router'

const value = ref('')
const loading = ref(false)
const listData = ref([
  {
    icon: 'icon-Windows',
    name: '系统监控',
    tips: '硬件,测速,图表',
    route: RouterConstant.WinMonitor
  },
  {
    icon: 'icon-jsonjiexi',
    name: 'JSON工具类',
    tips: '在线解析,压缩,转义',
    route: RouterConstant.JsonTool
  },
  {
    icon: 'icon-erweima1',
    name: '二维码生成',
    tips: '识别,生成',
    route: RouterConstant.QrCode
  },
  {
    icon: 'icon-random',
    name: '随机字符',
    tips: '时间戳,密码,流水号',
    route: RouterConstant.RandomTool
  },
  {
    icon: 'icon-icons-',
    name: '加密工具',
    tips: '加解,解密,',
    route: RouterConstant.EncryptionTool
  },
  {
    icon: 'icon-cron',
    name: 'Cron表达式',
    tips: '生成,模拟,可视化',
    route: RouterConstant.CronTool
  },
  {
    icon: 'icon-WebSocket',
    name: 'WebSocket连接',
    tips: '连接测试,消息推送',
    route: RouterConstant.WebSocketTool
  },
  {
    icon: 'icon-postman_',
    name: '在线PostMan',
    tips: '存储Api,模拟发送请求',
    route: RouterConstant.PostMan
  },
  {
    icon: 'icon-Redis',
    name: 'Redis连接工具',
    tips: '可视化,存储连接,查询',
    route: RouterConstant.ComingSoon
  },
  {
    icon: 'icon-Windows',
    name: '待规划',
    tips: '显示,声音,显示,声音',
    route: RouterConstant.ComingSoon
  },
  {
    icon: 'icon-Windows',
    name: '待规划',
    tips: '显示,声音,显示,声音',
    route: RouterConstant.ComingSoon
  },
  {
    icon: 'icon-Windows',
    name: '待规划',
    tips: '显示,声音,显示,声音',
    route: RouterConstant.ComingSoon
  },
  {
    icon: 'icon-Windows',
    name: '待规划',
    tips: '显示,声音,显示,声音',
    route: RouterConstant.ComingSoon
  },
  {
    icon: 'icon-Windows',
    name: '待规划',
    tips: '显示,声音,显示,声音',
    route: RouterConstant.ComingSoon
  }
])

const groupBoxOnclick = (item) => {
  window.api.createWindow(item.route)
}

const onSearch = () => {
  loading.value = true
  // 模拟搜索操作
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<style lang="scss">
.outBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.baseView {
  padding: 32px 100px 10px 100px;
  text-align: center;
}

.groupBox {
  width: 250px;
  height: 83px;
  margin-top: 45px;
  line-height: 83px;
  display: flex;
  border: 1px solid #fff;
}

.groupBox:hover {
  border: 1px solid #edf2fa;
}

.groupToolImg {
  text-align: left;
  padding-left: 15px;
  margin-right: 15px;
}

.groupToolLabels {
  display: flex;
  margin-left: 10px;
  align-items: center;
}

.box-1 {
  display: flex;
  flex-direction: column;
}

.groupToolDescribeTitle {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
}

.groupToolDescribeContent {
  text-align: left;
  font-size: 14px;
  line-height: 10px;
}
</style>
